<template>
  <je-panel v-bind="formDesginOptions" ref="formPanel" class="form-design-container">
    <template #tbar>
      <div class="form-design-header">
        <je-form class="form" :model="formState" label-align="right" size="mini" autocomplete="off">
          <je-form-item label="表单列数" style="margin-right: 20px">
            <je-select
              v-model:value="formState.FUNCINFO_FORMCOLS"
              style="width: 80px"
              :allow-clear="false"
              :get-popup-container="getPopupContainer"
              config-info="JE_FUNC_LAYOUT_COLS,formState.FUNCINFO_FORMCOLS,code,S"
            />
          </je-form-item>

          <je-form-item label="表单宽度" style="margin-right: 20px">
            <je-input
              v-model:value="formState.FUNCINFO_FORMWIDTH"
              placeholder="支持%，为空表示100%宽度"
              style="width: 80px"
              @keyup="handleKeyUpFormWidth"
            />
          </je-form-item>

          <je-form-item label="" style="margin-right: 20px">
            <label> <je-checkbox v-model:checked="formState.isAuto" />&nbsp;&nbsp;&nbsp;联动</label>
          </je-form-item>

          <je-form-item label="字段标题宽" style="margin-right: 20px">
            <je-input-number
              v-model:value="formState.FUNCINFO_FORMLABELWIDTH"
              style="width: 80px"
              min="0"
              :parser="(value) => value.replace(/[^0-9]+/g, '')"
            />
          </je-form-item>

          <je-form-item label="表单背景色" style="margin-right: 20px">
            <je-color
              v-model:value="formState.FUNCINFO_FORMBGCOLOR"
              style="width: 120px"
            ></je-color>
          </je-form-item>

          <je-form-item label="">
            <je-radio-group v-model:value="formState.FUNCINFO_FORM_STYLE" button-style="solid">
              <je-radio-button value="FIDELITY">高保真</je-radio-button>
              <je-radio-button value="TYPOGRAPHY">仅排版</je-radio-button>
            </je-radio-group>
          </je-form-item>
        </je-form>

        <je-form :model="formState" label-align="right" autocomplete="off">
          <je-form-item label="">
            <je-button type="text" @click="handleAddFieldset({ name: '分组框', type: 'fieldset' })">
              <span class="button-color">
                <i class="fal fa-plus-circle"></i>&nbsp; 添加分组框
              </span>
            </je-button>
          </je-form-item>

          <je-form-item label="">
            <je-button
              type="text"
              @click="handleAddFieldset({ name: '子功能集合', type: 'childfuncfield' })"
            >
              <span class="button-color">
                <i class="fal fa-plus-circle"></i>&nbsp; 添加子功能集合
              </span>
            </je-button>
          </je-form-item>

          <je-form-item label="">
            <je-button type="text" @click="handleSubmit">
              <span class="button-color"> <i class="fal fa-save"></i>&nbsp; 保存</span>
            </je-button>
          </je-form-item>
          <div class="field-bold-icon"
            ><i
              class="jeicon"
              :class="[!statusFlag ? 'jeicon-packup' : 'jeicon-an']"
              @click="boldField"
            ></i
          ></div>
        </je-form>
      </div>
    </template>

    <template #default>
      <Container
        v-if="formState.FUNCINFO_FORMCOLS"
        ref="containerEl"
        :class="formState.isAuto ? 'liandong' : ''"
        :style="{
          width: computedWidth,
          background: formState.FUNCINFO_FORMBGCOLOR || '#fff',
        }"
        :style-type="formState.FUNCINFO_FORM_STYLE"
        :data="showFields"
        :columns="formState.FUNCINFO_FORMCOLS"
        :form-style="formState.FUNCINFO_FORMFIELD_SPACING"
        :label-width="formState.FUNCINFO_FORMLABELWIDTH || 140"
      />
    </template>

    <template #right>
      <h3 class="rightTitle">字段信息</h3>
      <Fields :data="hiddenFields" :is-show-prompt="true" />

      <je-drawer
        v-if="visible"
        v-model:visible="visible"
        :width="500"
        placement="right"
        :closable="false"
        :get-container="getContainer"
        class="form-design-drawer"
        @close="hideEditFieldConfig"
      >
        <edit-field-config
          ref="editFieldConfig"
          @hideEditFieldConfig="hideEditFieldConfig"
          @updateEditFieldConfig="updateEditFieldConfig"
        ></edit-field-config>
      </je-drawer>
    </template>
  </je-panel>
</template>

<script>
  import {
    toRefs,
    provide,
    ref,
    defineComponent,
    onMounted,
    computed,
    reactive,
    onBeforeMount,
  } from 'vue';
  import {
    InputNumber,
    Drawer,
    Form,
    Input,
    Panel,
    Color,
    Radio,
    Select,
    Checkbox,
    Button,
    Modal,
  } from '@jecloud/ui';
  import VueEvent from '@/helper/event';
  import Container from './container';
  import Fields from './fields';
  import { provideDrag } from './hooks/config';
  import { refreshData } from './hooks/use-draggable';
  import EditFieldConfig from '@/components/form-field-config/components/edit-field-config.vue';

  import {
    getData as GetData,
    GetListBaseConfig as GetDetail,
    baseConfigSave as SaveFormData,
    DoFormSave as AddFieldSet,
    DoFormUpdateList as SaveFormDesign,
  } from '@/api/index';
  import { isNotEmpty, pick, loadDDItemByCodes } from '@jecloud/utils';
  import { useFormField } from './hooks/use-form-field';

  export default defineComponent({
    name: 'FormDesign',
    components: {
      JePanel: Panel,
      JeColor: Color,
      JeInput: Input,
      JeInputNumber: InputNumber,
      JeSelect: Select,
      JeRadioGroup: Radio.Group,
      JeRadioButton: Radio.Button,
      JeForm: Form,
      JeButton: Button,
      JeFormItem: Form.Item,
      JeCheckbox: Checkbox,
      Fields,
      Container,
      JeDrawer: Drawer,
      EditFieldConfig,
    },
    props: {
      visble: {
        type: Boolean,
        default: false,
      },
      recordData: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    emits: ['changeModal', 'refreshChildData'],
    setup(props) {
      const info = reactive({
        data: [],
        defaultData: [],
      });
      const containerEl = ref();
      const { funcStore, showFieldConfig } = useFormField({ props });
      let formState = reactive(funcStore.funcFormBean);

      const state = reactive({
        oldData: [],
        funcId: props.recordData.JE_CORE_FUNCINFO_ID,
        formDesginOptions: {
          tbar: { size: 40, split: true, style: { padding: '4px 18px 0', background: '#f7f9fc' } },
          right: { size: 240, minSize: 240, split: true },
        },
        visible: false,
        editFieldConfig: ref(),
        name: 'formDesign', // 别删，离开当前组件要用
        statusFlag: false,
        isClickFoldIcon: false,
      });

      const computedWidth = computed(() => {
        let width = formState.FUNCINFO_FORMWIDTH;
        let isAuto = formState.isAuto;
        if (isAuto) {
          if (width.indexOf('%') !== -1) {
            return width;
          } else {
            return width ? width + 'px' : '100%';
          }
        } else {
          return '100%';
        }
      });

      // 显示字段
      const showFields = computed(() => {
        const items = [];
        info.data.forEach((item) => {
          if (!item.hidden) {
            items.push(item);
          }
        });

        return items.sort((a, b) => {
          return a.index - b.index;
        });
      });

      // 隐藏字段
      const hiddenFields = computed(() => {
        const items = [];
        info.data.forEach((item) => {
          if (item.hidden) {
            items.push(item);
          }
        });
        // 分组框和分组框下的字段
        let arrIsGroupField = [];
        // 不属于分组框下的字段
        let arrNoGroupField = [];

        items.forEach((item) => {
          if (item.type === 'group' || item.groupId) {
            arrIsGroupField.push(item);
          }
          if (item.type !== 'group' && !item.groupId) {
            arrNoGroupField.push(item);
          }
        });

        return methods.remakeData(arrIsGroupField).concat(arrNoGroupField);
      });

      // 传递子元素使用
      provide(provideDrag, {
        refreshData({ evt, action }) {
          refreshData({ evt, action, info, containerEl });
        },
      });

      const methods = {
        // 折叠分组框
        boldField() {
          state.statusFlag = !state.statusFlag;
          state.isClickFoldIcon = true;
          showFields.value.map((item) => {
            item.flag = state.statusFlag;
          });
        },
        getPopupContainer() {
          return document.body;
        },
        // 树形结构数据排序
        remakeData(items) {
          let newDataItems = []; // 存放结果数据
          let pidItemsDic = {}; // 结构 groupId:子集的数组  字典查询速度快

          // 将数据筛选 装入字典
          for (let i = 0; i < items.length; i++) {
            let item = items[i];
            if (!pidItemsDic[item.groupId]) {
              pidItemsDic[item.groupId] = [item];
            } else {
              pidItemsDic[item.groupId].push(item);
            }
          }

          Object.keys(pidItemsDic).forEach((item) => {
            // type 等于 field 的顺序在 type 等于 group 的前面
            pidItemsDic[item].sort((a, b) => a.type.localeCompare(b.type));
          });
          getSonArrByPid(''); // 传入groupId为0或空 即获取0级菜单
          getSonArrByPid(null); // 传入groupId为0或空 即获取0级菜单
          // 类似二叉树前序遍历 循环菜单查找子菜单，因为线性执行，所以一条分支找完才会去查找下一条分支
          function getSonArrByPid(groupId) {
            let itemsTemp = pidItemsDic[groupId] || []; // groupId对应子集  缺省值[]
            for (let i = 0; i < itemsTemp.length; i++) {
              let item = itemsTemp[i];
              newDataItems.push(item);

              // 存在子集递归
              if (pidItemsDic[item.id]) getSonArrByPid(item.id);
            }
          }

          return newDataItems;
        },
        getData() {
          const params = {
            tableCode: 'JE_CORE_RESOURCEFIELD',
            j_query: JSON.stringify({
              custom: [
                {
                  code: 'RESOURCEFIELD_FUNCINFO_ID',
                  value: state.funcId,
                  type: '=',
                  cn: 'and',
                },
              ],
              order: [{ code: 'SY_ORDERINDEX', type: 'asc' }],
            }),
          };
          GetData(params).then((res) => {
            let data = res.map((item, index) => {
              Object.keys(item).forEach((key) => {
                if (key != 'SY_ORDERINDEX') {
                  item[key] = item[key] || '';
                }
              });
              item.flag = state.isClickFoldIcon ? state.statusFlag : false;
              return {
                ...item,
                RESOURCEFIELD_COLS: String(item.RESOURCEFIELD_COLS || '2'),
                RESOURCEFIELD_COLSPAN: String(item.RESOURCEFIELD_COLSPAN || '2'),
                index: item.SY_ORDERINDEX,
                type: item.RESOURCEFIELD_XTYPE === 'fieldset' ? 'group' : 'field',
                hidden: item.RESOURCEFIELD_HIDDEN === '1',
                groupId: item.RESOURCEFIELD_GROUPNAME || '',
                id:
                  item.RESOURCEFIELD_XTYPE === 'fieldset'
                    ? item.RESOURCEFIELD_CODE
                    : String(index + 1),
              };
            });
            state.oldData = JSON.parse(
              JSON.stringify(data, (key, value) => (typeof value === 'undefined' ? '' : value)),
            );
            info.data = JSON.parse(
              JSON.stringify(data, (key, value) => (typeof value === 'undefined' ? '' : value)),
            );
            info.defaultData = JSON.parse(
              JSON.stringify(data, (key, value) => (typeof value === 'undefined' ? '' : value)),
            );
          });
        },

        getDetail() {
          const params = {
            pkValue: state.funcId,
          };
          GetDetail(params).then((res) => {
            Object.assign(formState, res);
            formState.FUNCINFO_FORMCOLS = String(res.FUNCINFO_FORMCOLS || '2');
            formState.FUNCINFO_FORMWIDTH = String(res.FUNCINFO_FORMWIDTH);
            formState.FUNCINFO_FORMLABELWIDTH = Number(res.FUNCINFO_FORMLABELWIDTH || 0);
            formState.FUNCINFO_FORM_STYLE = res.FUNCINFO_FORM_STYLE || 'FIDELITY';
            formState.FUNCINFO_FORMBGCOLOR = res.FUNCINFO_FORMBGCOLOR || '';
          });
        },

        // 添加分组框
        handleAddFieldset(obj) {
          const params = {
            tableCode: 'JE_CORE_RESOURCEFIELD',
            RESOURCEFIELD_FUNCINFO_ID: state.funcId,
            RESOURCEFIELD_XTYPE: obj.type,
            RESOURCEFIELD_NAME: obj.name,
          };
          AddFieldSet(params).then((res) => {
            let data = res.data;
            data.flag = false;
            data.index = data.SY_ORDERINDEX;
            data.type = data.RESOURCEFIELD_XTYPE === 'fieldset' ? 'group' : 'field';
            data.hidden = data.RESOURCEFIELD_HIDDEN === '1';
            data.groupId = data.RESOURCEFIELD_GROUPNAME;
            data.id =
              data.RESOURCEFIELD_XTYPE === 'fieldset'
                ? data.RESOURCEFIELD_CODE
                : String(data.SY_ORDERINDEX);
            data.RESOURCEFIELD_COLS = String(data.RESOURCEFIELD_COLS || '2');
            data.RESOURCEFIELD_COLSPAN = String(data.RESOURCEFIELD_COLSPAN || '2');
            const infoData = info.data;
            infoData.unshift(data);
            info.data = JSON.parse(JSON.stringify(infoData));
            info.defaultData = JSON.parse(JSON.stringify(info));
            const oldData = state.oldData;
            oldData.unshift(data);
            state.oldData = JSON.parse(JSON.stringify(oldData));
            hiddenFields.value.forEach((item) => {
              item.index = item.index + 1;
            });
            setTimeout(() => {
              containerEl.value.dragEl.$el.scrollTop = 0;
            }, 100);
            VueEvent.emit('refreshFormFieldConfig');
          });
        },

        async handleSubmit() {
          //如果是分组框的话，
          const changeFields = [
            'JE_CORE_RESOURCEFIELD_ID',
            'RESOURCEFIELD_COLSPAN',
            'RESOURCEFIELD_BGCOLOR',
            'RESOURCEFIELD_CODE',
            'RESOURCEFIELD_COLS',
            'RESOURCEFIELD_DISABLED',
            'RESOURCEFIELD_FUNCINFO_ID',
            'RESOURCEFIELD_HIDDEN',
            'RESOURCEFIELD_LOCATE',
            'RESOURCEFIELD_NAME',
            'RESOURCEFIELD_OTHERCONFIG',
            'RESOURCEFIELD_ROWSPAN',
            'RESOURCEFIELD_XTYPE',
            'RESOURCEFIELD_GROUPNAME',
            'SY_ORDERINDEX',
          ];
          const changeCustomField = [
            'JE_CORE_RESOURCEFIELD_ID',
            'RESOURCEFIELD_READONLY',
            'RESOURCEFIELD_COLSPAN',
            'RESOURCEFIELD_REQUIRE',
            'RESOURCEFIELD_HIDDEN',
            'RESOURCEFIELD_XTYPE',
            'RESOURCEFIELD_GROUPNAME',
            'RESOURCEFIELD_NAME',
            'SY_ORDERINDEX',
            'RESOURCEFIELD_OTHERCONFIG',
            'RESOURCEFIELD_HEIGHT',
          ];
          const pkName = 'JE_CORE_RESOURCEFIELD_ID';
          const oldData = new Map();
          // 初始化历史数据
          state.oldData.forEach((item) => {
            const pkCode = item[pkName];
            if (item.RESOURCEFIELD_XTYPE === 'fieldset') {
              oldData.set(pkCode, pick(item, changeFields));
            } else {
              oldData.set(pkCode, pick(item, changeCustomField));
            }
          });

          const updateData = [];
          console.log(info.data);
          info.data.forEach((item, index) => {
            const pkCode = item[pkName];
            item.RESOURCEFIELD_FUNCINFO_ID = state.funcId;
            item.SY_ORDERINDEX = index + 1;
            item.RESOURCEFIELD_HIDDEN = item.hidden ? '1' : '0';
            item.RESOURCEFIELD_GROUPNAME = item.groupId || '';
            item.RESOURCEFIELD_HEIGHT = item.RESOURCEFIELD_HEIGHT || 0;
            const oldItem = oldData.get(pkCode);
            const changeItem = {};

            Object.keys(oldItem).forEach((key) => {
              if (item[key] != oldItem[key]) {
                changeItem[key] = item[key];
              }
            });
            if (isNotEmpty(changeItem)) {
              changeItem[pkName] = item[pkName];
              updateData.push(changeItem);
            }
          });
          const params = {
            tableCode: 'JE_CORE_RESOURCEFIELD',
            funcId: state.funcId,
            strData: JSON.stringify(updateData),
          };
          let result = await SaveFormDesign(params)
            .then((res) => {
              VueEvent.emit('refreshFormFieldConfig');
              // methods.getData();
              Modal.message(res.message, 'success');
              return true;
            })
            .catch((err) => {
              console.log('error', err);
              Modal.alert(err.message, 'error');
            });
          // 下面的内容其实是做同步处理的，现在更改了同步处理的方式
          const params2 = {};
          params2.tableCode = 'JE_CORE_FUNCINFO';
          params2.JE_CORE_FUNCINFO_ID = state.funcId;

          Object.keys(formState).forEach((item) => {
            params2[item] = formState[item];
          });

          let result2 = await SaveFormData(params2)
            .then(() => {
              // 重置
              info.data = JSON.parse(
                JSON.stringify(info.data, (key, value) =>
                  typeof value === 'undefined' ? '' : value,
                ),
              );
              info.defaultData = JSON.parse(
                JSON.stringify(info.data, (key, value) =>
                  typeof value === 'undefined' ? '' : value,
                ),
              );
              // VueEvent.emit('refreshFormFieldConfig');
              return true;
            })
            .catch((err) => {
              console.log('error', err);
              Modal.alert(err.message, 'error');
            });

          return result && result2;
        },

        handleKeyUpFormWidth() {
          let str = formState.FUNCINFO_FORMWIDTH;
          // 只保留大于等于0的整数和百分号
          str = str.replace(/[^\d%]/g, '');

          let arr = str.split('%');
          let number = arr.length - 1;

          if (number > 1) {
            // 如果百分号大于1个
            formState.FUNCINFO_FORMWIDTH = arr[0] + '%';
          } else if (number === 1 && str[str - 1] !== '%') {
            // 如果百分号有1个，并且不在字符串的尾部
            formState.FUNCINFO_FORMWIDTH = arr[0] + '%';
          } else {
            formState.FUNCINFO_FORMWIDTH = str;
          }
        },

        getContainer() {
          // 解决层级问题 （如果不这样写，点击打开表单字段配置里的任何一项弹窗层级会出现问题）
          return document.querySelector('.je-modal--wrapper');
        },

        hideEditFieldConfig() {
          state.visible = false;
        },

        updateEditFieldConfig(obj) {
          let findIndex = info.data.findIndex(
            (item) => item.RESOURCEFIELD_CODE === obj.RESOURCEFIELD_CODE,
          );

          Object.keys(info.data[findIndex]).forEach((item) => {
            info.data[findIndex][item] = obj[item];
          });

          // 更新字段信息;
          info.data[findIndex].index = obj.SY_ORDERINDEX;
          info.data[findIndex].type = obj.RESOURCEFIELD_XTYPE === 'fieldset' ? 'group' : 'field';
          info.data[findIndex].hidden = obj.RESOURCEFIELD_HIDDEN === '1';
          info.data[findIndex].groupId = obj.RESOURCEFIELD_GROUPNAME || '';
          info.data[findIndex].id =
            obj.RESOURCEFIELD_XTYPE === 'fieldset'
              ? obj.RESOURCEFIELD_CODE
              : String(obj.SY_ORDERINDEX);

          state.visible = false;

          VueEvent.emit('refreshFormFieldConfig');
        },
      };
      onBeforeMount(() => {
        // 获取字典数据
        loadDDItemByCodes(['JE_FUNC_FIELD_XTYPE']);
      });
      onMounted(() => {
        methods.getData();
        methods.getDetail();

        VueEvent.off('refreshFormDesign');
        VueEvent.on('refreshFormDesign', () => {
          methods.getData();
          methods.getDetail();
        });

        VueEvent.off('showEditFormFieldConfig');
        VueEvent.on('showEditFormFieldConfig', (obj) => {
          // index，hiden，groupId 的修改要赋值给对应的字段
          obj.SY_ORDERINDEX = obj.index;
          obj.RESOURCEFIELD_HIDDEN = obj.hidden;
          obj.RESOURCEFIELD_GROUPNAME = obj.groupId || '';
          showFieldConfig({
            bean: obj,
            props: { formDesign: true, onUpdateEditFieldConfig: methods.updateEditFieldConfig },
          });
        });
      });

      return {
        formState,
        ...toRefs(state),
        ...methods,
        showFields,
        hiddenFields,
        info,
        containerEl,
        computedWidth,
      };
    },
  });
</script>
<style lang="less">
  .form-design-drawer .ant-drawer-body {
    padding: 0;
  }
  .form-design-container .ant-form-item-control {
    flex: 1 1 0;
    min-width: 0;
  }

  .form-design-container .typography-height .ant-form-item-control {
    padding: 2px 0;
  }
  .form-design-container .only-type-setting .ant-form-item-control {
    padding: 0;
  }
  .form-design-container .typography-height .ant-form-item-no-colon::after {
    margin: 0 !important;
  }
  .form-design-container .ant-input-number,
  .ant-input-number-input-wrap,
  .ant-input-number-input {
    width: 100% !important;
  }
  .form-design-container
    .typography-height
    .je-form-item.je-form-item-label-align-left
    .ant-form-item-label {
    padding-left: 0;
  }

  .common-css {
    position: relative;
    border: 1px solid transparent !important;
    cursor: move;
    .je-input-select-tree,
    .ant-picker {
      width: 100% !important;
    }
    .common-field-css {
      height: 30px;
      z-index: 10;
      background: rgba(237, 240, 241, 0.8);
      top: -31px;
      padding: 10px;
      position: absolute;
      display: flex;
      // row-gap: 4px;
      flex: 1;
      justify-content: space-between;
      align-items: center;
      left: -2px;
      right: -2px;
      min-width: 260px;
      color: #3f3f3f;
    }
  }
  .mouseEnterBorder {
    border: 1px dashed #555 !important;
    background: transparent !important;
  }
  .mouseoverBgColor {
    background: transparent !important;
  }
  .form-design-container {
    .je-panel-bar-tbar {
      height: 42px !important;
      border-bottom: 1px solid #d9d9d9;
    }

    .ant-form {
      display: flex;
    }

    .ant-col[data-type] {
      padding: 0 5px !important;
    }

    // .je-panel-item-region-top {
    //   border-bottom: 1px solid #d9d9d9;
    // }

    .BORDER {
      border: 1px solid #ddd;
    }

    .is--draggable {
      cursor: move;
    }

    &-sortable-ghost {
      cursor: move;
      box-shadow: 0px 0px 5px @primary-3 inset;
      background-color: @white !important;
      & > * {
        opacity: 0;
      }
    }

    .BORDER();
    border-top: none;
    background-color: #f9f9f9;
    .form-hidden-fields {
      background-color: #fff;
      width: 100%;
      height: calc(100% - 40px);
      overflow: auto;
      border-left: 1px solid #ddd;
      // border-right: 1px solid #ddd;
      .drag-item {
        display: flex;
        align-items: center;
        .BORDER();
        padding: 4px 10px 4px;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        cursor: move;
        &.group {
          background: #d3e1f1;
        }
        &.child {
          background: #bbefbd;
        }
        &.workflowhistory {
          background: #bbcaef;
        }
        .textWrap {
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        .red {
          margin: 0 0 0 5px;
          color: red;
        }
        .solid {
          display: none;
          margin: 0 0 0 auto;
          padding: 0 10px;
          color: #000000d9;
          cursor: pointer;
          &:hover {
            font-weight: bold;
            color: #3265f5;
          }
        }
        &:hover {
          .solid {
            display: block;
          }
        }
      }
    }

    .container,
    .container-group .group-body {
      height: 100%;
      align-content: start;
      min-height: 40px;
      padding-top: 4px;
      row-gap: 0px !important;
    }

    .container {
      // margin: 0 !important;
      padding: 0px 0 20px 0;
      overflow: auto;
      .drag-item {
        .BORDER();
        padding: 10px;
        width: 200px;
        cursor: move;
      }

      &-group {
        border: 1px solid #d9d9d9;
        // background-color: @green-1;
        .group-header {
          display: flex;
          align-items: center;
          height: 40px;
          padding: 0 10px;
          background-color: #f5f5f5;
          .icon {
            margin: 2px 5px 0px 0;
            cursor: pointer;
            vertical-align: top;
            line-height: 1;
            font-size: 18px;
          }
          .text {
            position: relative;
            min-width: 50px;
            max-width: calc(100% - 20px);
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            cursor: pointer;
            &:focus {
              outline: none;
            }
            &:focus::after {
              position: absolute;
              content: '';
              bottom: 0;
              left: 0;
              width: 100%;
              height: 2px;
              margin: 0;
              background: #000;
            }
          }
        }
      }

      &-field {
        // height: 40px;
        background: #ffe699;
        border: 1px solid #ffe699;
        display: flex;
        align-items: center;
        margin-bottom: 4px;
        &.readonly {
          background: #d9d9d9;
          border: 1px solid #d9d9d9;
        }
        .icon {
          margin: 2px 5px 0px 0;
          cursor: pointer;
          vertical-align: top;
          line-height: 1;
          font-size: 18px;
        }
        .text {
          position: relative;
          min-width: 50px;
          max-width: calc(100% - 20px);
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          cursor: pointer;
          &:focus {
            outline: none;
          }
          &:focus::after {
            position: absolute;
            content: '';
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            margin: 0;
            background: #000;
          }
        }
        .required::after {
          display: inline-block;
          margin: 2px 0 0 5px;
          vertical-align: top;
          color: #ff4d4f;
          font-size: 14px;
          font-family: SimSun, sans-serif;
          line-height: 1;
          content: '*';
        }
      }

      &-field,
      &-group {
        position: relative;
        .actions {
          display: flex;
          align-items: center;
          margin: 0 0 0 auto;
          height: 40px;
          padding: 0px 10px;
          .peise {
            position: relative;
            cursor: pointer;
            .dropmenuWrap {
              position: fixed;
              z-index: 11;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              cursor: auto;
            }
            .dropmenu {
              position: fixed;
              top: 30px;
              left: 0;
              z-index: 21;
              width: 300px;
              padding: 20px 0;
              background: #fff;
              border: 1px solid #ddd;
              cursor: auto;
              .ant-form-item-label {
                width: 100px;
              }
              .change-field-color {
                text-align: center;
                border-top: 1px solid #efefef;
                padding: 20px 20px 0;
                .color-container {
                  display: flex;
                  justify-content: space-around;
                  span {
                    width: 30px;
                    height: 30px;
                    border-radius: 4px;
                    cursor: pointer;
                    display: inline-block;
                  }
                }
              }
            }
          }
          .remove-icon {
            cursor: pointer;
            margin-left: 10px;
          }
        }
      }
    }
  }
</style>

<style lang="less" scoped>
  .form-design-container {
    width: 100%;
    overflow: hidden;
    background: #f0f2f5;
    .field-bold-icon {
      padding: 5px 10px 10px;
      cursor: pointer;
      text-align: center;
      color: #3f3f3f;
    }
    .field-bold-icon:hover {
      color: #000;
    }
    .typography-height {
      &-field {
        padding: 4px 8px;
      }
    }
    .only-type-setting {
      &-field {
        padding: 0px 8px;
      }
    }
    // border-top: 1px solid #d9d9d9;
    .form-design-header {
      display: flex;
      justify-content: space-between;
      height: 36px;
      .button-color {
        color: #3265f5;
      }
      .form {
        overflow-x: auto;
        overflow-y: hidden;
        .ant-form-item {
          flex-shrink: 0;
          margin: 0 20px 0 0 !important;
        }
      }
    }
    .liandong {
      margin: 0 auto !important;
    }
    .rightTitle {
      height: 40px;
      margin: 0;
      padding: 0 10px;
      line-height: 40px;
      background: #f7f9fc;
      color: #000000d9;
      font-size: 14px;
      border-left: 1px solid #ddd;
      // border-right: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
    }
  }
</style>
